<template>
  <div class="Homechir">
	  <h2  class="tit">订单详情</h2>
	  <div class="main">
		<!--  发货状态  -->
		<p class="title">订单信息</p>
			<div class="Homechir-one">
				<div style="width: 400px;float: left;border-right: 1px solid #E4E9EE;margin-top: 10px;">
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">订单号：{{count.orderNumber}}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">收款单位：{{count.doctorHospitalName}}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">支付方式: {{ count.tradingChannels === 0 ? '微信' : (count.tradingChannels === 1 ? '支付宝' : '线下支付') }}</p>
				</div>
				<div style="width: calc(100% - 480px);float: left;margin: 20px 0 0 45px;padding: 0 30px">
					<div class="time" style="width:100%;margin:0 auto 10px;padding:0">
						<span style="width:49%;display:inline-block;height:90%;line-height:26px;">{{count.doctorTime ? count.doctorTime:''}}</span>
						<span style="width:50%;display:inline-block;height:90%;margin:auto;padding:0;line-height:26px;text-align:right">{{count.notifyTime ? count.notifyTime:''}}</span>
					</div>
					<Steps :current="count.notifyTime ? 2 : (count.doctorTime ? 1 : 0)" align-center process-status="wait">
						<Step title="医师开具处方" style="width: auto" :content="count.doctorTime ? count.doctorFyName:''" icon="ios-checkmark"></Step>
						<Step title="缴费时间" style="width: auto" icon="ios-checkmark"></Step>
					</Steps>
				</div>
			</div>
		</div>
		<div class="main">
			<p class="title">申请单 / 处方明细</p>
			<!--  订单信息  -->
			<div class="Homechir-sel" style="padding-top: 10px;margin-bottom: 30px">
				<div style="width: 400px;float: left;border-right: 1px solid #E4E9EE;">
					<Button type="primary" style="font-size: 14px;border-radius:20px;line-height: 10px;float:right;margin-right:15px" @click="search(count.rxId)">查看处方笺</Button>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">申请单号: {{ count.orderNumber ? count.orderNumber : '暂无申请单号' }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">
						<!--申请单类别  -->
						申请单类别: 处方申请</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">患者姓名: {{ count.memberName ? count.memberName : '暂无患者姓名' }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">状态:
						<span style="color: red;" v-if="refundEntity">{{ refundEntity.orderStatus === 0 ? '申请中' : (refundEntity.orderStatus === 1 ? '已退款' : (refundEntity.orderStatus === 2 ? '拒绝退款' : (refundEntity.orderStatus === 3 ? '退款中' : '同意退款'))) }}</span>
						<span v-if="!refundEntity">暂无退款状态</span>
					</p>
				</div>
				<div style="width: calc(100% - 405px);float: left;">
					<div style="width: 90%;margin: 10px auto;text-align: center">
						<Table
						:columns="columns1"
						:data="data2"
						border
						style="width: 100%;text-align: center"
						></Table>
					</div>
				</div>
			</div>
		</div>
		<!--  退款信息  -->
		<div class="main" v-if="refundEntity">
			<p class="title">退款信息</p>
			<div class="Homechir-sel" style="display: flex;flex-direction: row;min-height: 225px">
				<div style="width: 400px;border-right: 1px solid #E4E9EE;padding-bottom: 10px">
					<p style="width: 350px;margin:0;margin-top: 10px;margin-left: 20px;color: #242526;font-size: 13px;line-height: 22px;height: 22px;">订单编号: {{ count.orderNumber }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款发起: 用户发起</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款人: {{ count.receiverName ? count.receiverName : '暂无退款人' }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">联系电话: {{ count.receiverPhone ? count.receiverPhone : '暂无联系电话' }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 22px;word-wrap:break-word;">退款原因: {{ count.reason ? count.reason : '退款原因' }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款时间: {{ count.refundTime ? count.refundTime : '退款时间' }}</p>
					<p v-if="(refundEntity.pharmacyReason && refundEntity.auditorReason!='') !=null||(refundEntity.auditorReason!=null && refundEntity.auditorReason!='')" style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 25px;">
					药店审核结果: {{refundEntity.pharmacyReason?refundEntity.pharmacyReason:refundEntity.auditorReason}}</p>
				</div>
				<div style="width: calc(100% - 400px);padding: 0 30px">
					<p style="width: 95%;color: #F56C6C;height: 60px;line-height: 60px;font-size: 20px;font-weight:500;text-align: left">退款申请进度</p>
					<div v-if="refundEntity.pharmacyStatus !=-1 ">
						<div class="time" style="width:100%;margin:0 auto 10px;padding:0">
							<span style="width:29%;display:inline-block;height:90%;line-height:26px;">{{refundEntity.createTime?refundEntity.createTime:''}}</span>
							<span style="width:22%;display:inline-block;height:90%;line-height:26px;">{{refundEntity.pharmacyAuditorTime?refundEntity.pharmacyAuditorTime:''}}</span>
							<span style="width:25%;display:inline-block;height:90%;margin:auto;padding:0;line-height:26px;text-align:center">{{refundEntity.auditorTime?refundEntity.auditorTime:''}}</span>
							<span style="width:21%;display:inline-block;height:90%;margin:auto;padding:0;line-height:26px;text-align:right">{{refundEntity.auditorTime?refundEntity.auditorTime:''}}</span>
						</div>
						<Steps :current="refundEntity.auditorTime ? 3 :(refundEntity.auditorTime ? 2 : (refundEntity.pharmacyAuditorTime ? 1 : 0))" align-center process-status="wait">
							<Step title="申请退款时间" style="width: auto" icon="ios-checkmark"></Step>
							<Step :title="refundEntity.pharmacyStatus==0?'待药店审核':(refundEntity.pharmacyStatus==1?'药店审核':'药店拒绝')" style="width: auto" icon="ios-checkmark" :content="refundEntity.pharmacyAuditorTime?refundEntity.pharmacyAuditor:''" ></Step>
							<Step title="运营端管理" style="width: auto" icon="ios-checkmark" :content="refundEntity.auditorTime?refundEntity.auditor:''" ></Step>
							<Step v-if="refundEntity.orderStatus === 1 || refundEntity.orderStatus === 0" title="退款到账时间" style="width: auto" icon="ios-checkmark"></Step>
							<Step v-if="refundEntity.orderStatus === 2" title="拒绝退款" style="width: auto" icon="ios-checkmark"></Step>
							<Step v-if="refundEntity.orderStatus === 3" title="退款中" style="width: auto" icon="ios-checkmark"></Step>
							<Step v-if="refundEntity.orderStatus === 4" title="同意退款" style="width: auto" icon="ios-checkmark"></Step>
						</Steps>
					</div>
					<div v-else>
						<div class="time" style="width:100%;margin:0 auto 10px;padding:0">
							<span style="width:33%;display:inline-block;height:90%;line-height:26px;">{{refundEntity.createTime?refundEntity.createTime:''}}</span>
							<span style="width:33%;display:inline-block;height:90%;margin:auto;padding:0;line-height:26px;text-align:center">{{refundEntity.auditorTime?refundEntity.auditorTime:''}}</span>
							<span style="width:33%;display:inline-block;height:90%;margin:auto;padding:0;line-height:26px;text-align:right">{{refundEntity.auditorTime?refundEntity.auditorTime:''}}</span>
						</div>
						<Steps :current="refundEntity.auditorTime ? 2 : (refundEntity.auditorTime ? 1 : 0)" align-center process-status="wait">
							<Step title="申请退款时间" style="width: auto" icon="ios-checkmark"></Step>
							<Step title="运营端管理" style="width: auto" icon="ios-checkmark" :content="refundEntity.auditorTime?refundEntity.auditor:''" ></Step>
							<Step v-if="refundEntity.orderStatus === 1 || refundEntity.orderStatus === 0" title="退款到账时间" style="width: auto" icon="ios-checkmark"></Step>
							<Step v-if="refundEntity.orderStatus === 2" title="拒绝退款" style="width: auto" icon="ios-checkmark"></Step>
							<Step v-if="refundEntity.orderStatus === 3" title="退款中" style="width: auto" icon="ios-checkmark"></Step>
							<Step v-if="refundEntity.orderStatus === 4" title="同意退款" style="width: auto" icon="ios-checkmark"></Step>
						</Steps>
					</div>
				</div>
			</div>
			<!-- 是否需要药店端审核弹窗 -->
			<Modal v-model="fundcodeFlag" title="温馨提示" :footer="null">
				<div>请确认是否需要药店端审核!</div>
				<div slot="footer">
					<div class="btn-group" style="text-align:center">
						<Button @click="fundcodeFlagClick" style="width:75px;height:35px;">
							<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i> 否
						</Button>
						<Button type="primary" style="margin-right: 20px;width:75px;height:35px;" @click="fundcodeFlag = false" >
							<Icon type="ios-checkmark" style="margin-right: 5px" /> 是
						</Button>
					</div>
				</div>
			</Modal>
			<!-- 退款审核弹窗 -->
			<Modal
			v-model="fundcode"
			title="拒绝原因"
			:footer="null">
				<Input type="textarea" v-model="refundEntity.auditorReason" placeholder="请输入具体拒绝原因"/>
				<div slot="footer">
					<div class="btn-group" style="text-align:center">
						<Button type="primary" @click="handleFeeBack" style="margin-right: 20px;width:75px;height:35px;">
							<Icon type="ios-checkmark" style="margin-right: 5px" /> 确认
						</Button>
						<Button @click="fundcode = false" style="width:75px;height:35px;">
							<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i> 取消
						</Button>
					</div>
				</div>
			</Modal>
			<!-- //电子处方弹窗 -->
			<Modal
				v-model="madecode"
				title="电子处方"
				:footer="null"
				styles="padding: none;margin: none"
			>
			<div class="PerMask">
				<div class="PerMask-com">
					<div class="com-right" :style="codes">
						<div class="header">
							<p>{{clinic.hospitalName}}</p>
							<p>电子处方笺</p>
							<p>普通药品处方</p>
							<img v-if="!clinic.twoDimensionCode" src="../../../assets/images/ele-code.png" alt="">
							<img v-if="clinic.twoDimensionCode" :src="clinic.twoDimensionCode" alt="">
							<div class="nub">
								<span style="float:left"><b>门诊号</b>&nbsp;:&nbsp;{{clinic.clinicNumber}}</span>
								<span style="float:right"><b>处方号</b>&nbsp;:&nbsp;{{clinic.rxNumber}}</span>
							</div>
						</div>
						<div class="line"></div>
						<div class="essential">
							<span>姓名&nbsp;:&nbsp;<small>{{clinic.name}}</small></span>
							<span>性别&nbsp;:&nbsp;<small>{{clinic.gender === 1 ? '男':clinic.gender ===2?'女':'其他'}}</small></span>
							<span>年龄&nbsp;:&nbsp;<small>{{clinic.age}}岁</small></span>
							<span>联系电话&nbsp;:&nbsp;<small>{{clinic.telephone}}</small></span>
							<span>身份证号&nbsp;:&nbsp;<small>{{clinic.idcard}}</small></span>
							<span>开单科室&nbsp;:&nbsp;<small>{{clinic.doctorDeptName}}</small></span>
							<span>开单医生&nbsp;:&nbsp;<small>{{clinic.doctorName}}</small></span>
							<span>费别&nbsp;:&nbsp;<small>{{ clinic.paytypeName ? clinic.paytypeName : '自费'}}</small></span>
						</div>
						<div class="result">
							<p class="title">诊断结果</p>
							<div class="text dhei">
								{{ clinic.assessmentcontent ? clinic.assessmentcontent : '暂无' }}
							</div>
							<p class="title">RP</p>
							<div v-for="(rps,index) in rpList" :key="rps.id">
								<span style="font-size:16px">{{index+1}}.</span>
								<p class="tt" style="margin:5px 0">{{rps.name}}&nbsp;{{rps.spec}}&nbsp;X{{rps.dose}}{{rps.doseunit}}</p>
								<!-- <p class="nub">用法用量&nbsp;:&nbsp;&nbsp;{{rps.spec}}/{{rps.route}}&nbsp;{{rps.singledose}}日{{rps.doseunit}}/&nbsp;&nbsp;{{rps.frequency}}</p> -->
								<p class="nub">用法用量&nbsp;:&nbsp;&nbsp;{{rps.route}}&nbsp;{{rps.singledose}}{{rps.singledoseunit}}/次&nbsp;&nbsp;{{rps.frequency}}&nbsp;{{rps.period}}天</p>
								<p class="nub">备注&nbsp;:&nbsp;&nbsp;{{rps.medicalAdvice || '无'}}</p>
								<img src="../../../assets/images/zhang.png" alt="">
							</div>
						</div>
						<div class="line"></div>
						<div class="physician">
							<span v-if="!clinic.prescriptionSignature">处方医师&nbsp;:&nbsp;<small>{{ clinic.doctorName}}</small></span>
							<span v-if="clinic.prescriptionSignature">处方医师&nbsp;:&nbsp;<img  :src="clinic.prescriptionSignature" /></span>
							<span v-if="!clinic.prescriptionReview">处方审核&nbsp;:&nbsp;<small >{{ clinic.qdDocname}}</small></span>
							<span v-if="clinic.prescriptionReview">处方审核&nbsp;:&nbsp;<img :src="clinic.prescriptionReview" /></span>
							<span v-if="clinic.fyDoctorSignature">药品调配&nbsp;:&nbsp;<img :src="clinic.fyDoctorSignature" /></span>
							<span v-if="!clinic.fyDoctorSignature">药品调配&nbsp;:&nbsp;<small >{{clinic.fyDoctor}}</small></span>
							<span>电子处方时间&nbsp;:&nbsp;<small>{{clinic.createtime}}</small></span>
						</div>
					</div>
				</div>
			</div>
			<div slot="footer" style="text-align:center">
				<Button @click="madecode = false">
				<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
				</Button>
			</div>
			</Modal>
	  	</div>
		<div class="btn">
			<Button v-if="refundEntity && refundEntity.orderStatus === 0" type="error" style="margin-right: 20px;width:75px;height:35px;" @click="refuse">
				<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>拒绝
			</Button>
			<Button v-if="refundEntity && refundEntity.orderStatus === 0" type="primary" @click="check" style="margin-right: 20px;width:75px;height:35px;">
				<Icon type="ios-checkmark" style="margin-right: 5px" /> 同意
			</Button>
			<Button @click="handlebacks" style="width:75px;height:35px;">
				<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>关闭
			</Button>
		</div>
  	</div>
</template>

<script>
import api from "@/api/commonApi";
export default {
  name: 'Phachir',
	data() {
		return {
			distriStatus: null,
			fundcode: false,
			fundcodeFlag:false,
			isFlag:false,
			count: {},
			data2: [],
			columns1: [
				{ title: "项目名称", key: "name", align: "center"},
				{ title: "单位", key: "doseunit", align: "center"},
				{ title: "单价（元）", key: "price", align: "center"},
				{ title: "数量", key: "dose", align: "center"},
				{ title: "金额（元）", key: "money", align: "center",
					render:(h,params) => {
						let price = params.row.price
						let dose = params.row.dose
						let money
						return [
							h('div',
								money = Number(price) * Number(dose)
							)
						]
					}
				},
			],
			auditorReason: '',
			id: '',
			madecode: false,
			clinic: {},
			rpList: {},
			wulist: {},
			refundEntity: {},           //退款信息
			checktype: '',
		}
  	},
  created () {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "",
        title: "退费审批管理"
      },
      {
        path: "operation/prescriptionmanage/ordersearch/review",
        title: "处方退费"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted () {
    // this.distriStatus = parseInt(localStorage.getItem('orderStatus'));
    this.ishomeget();
  },
  methods: {
	//拒绝退款
	refuse() {
		this.checktype = 'no'
		if(this.refundEntity.pharmacyStatus == 0){
			this.fundcodeFlag = true;
		}else{
			// 处理申请按钮
    		this.fundcode = true
		}
	},
	//不需要药店端审核走运营端退款审核流程
	fundcodeFlagClick(){
		this.fundcodeFlag = false;
		if(this.checktype == 'ok') {
			this.handleFeeBack()
		} else {
			this.fundcode = true
		}
	},

	check() {
		this.checktype = 'ok'
		if(this.refundEntity.pharmacyStatus == 0){
			this.fundcodeFlag = true;
		}else{
			this.handleFeeBack()
		}
	},
	//退款审核
    handleFeeBack() {
		if (this.fundcode == true && !this.refundEntity.auditorReason && this.checktype == 'no') {
			this.$Message.error('请填写拒绝原因');
			return
		}  else if (this.fundcode == true && this.refundEntity.auditorReason && this.checktype == 'no'){
			if(this.refundEntity.orderStatus == 0 ){
				this.refundEntity.orderStatus = 2 //拒绝退款
			}
		} else {
			if(this.refundEntity.orderStatus == 0 ){
				this.refundEntity.orderStatus = 4        //退款中
			}
		}
		const reqBody = {
			auditorReason : this.refundEntity.auditorReason,
			orderStatus : this.refundEntity.orderStatus
		};
		this.$axios.post(api.RefundAuditor.replace('{id}', this.$route.query.id), reqBody).then(resp => {
			this.$Message.success('操作成功');
			this.$router.back();
		}).catch(err => {
		});
    },
	//订单详情
    ishomeget () {
      const map = {
        clinicId: this.$route.query.businessId
	  }
      this.$axios
        .post(api.findOrderDetailByClinicId, map)
        .then(res => {
          if (res.data.code === 1) {
            this.count = res.data.object;
            this.data2 = res.data.object.clinicBillEntityList.rpList;
			this.refundEntity = res.data.object.refundEntity;      //退款信息
			if(this.refundEntity.businessSources == 5){
				this.refundEntity.businessSources = '购药'
			}
          } else {
            this.$Message.error("请求异常");
          }
	    })
	},
	//电子处方详情
    search(rxId){
        this.madecode = true
        const map = {
          rxId:rxId
        }
        this.$axios
        .post(api.findRxDetailByclinicId, map)
        .then(res => {
          if (res.data.code === 1) {
              this.clinic = res.data.object;
              this.rpList = res.data.object.rpList
              if(this.clinic.prescriptionSignature){this.clinic.prescriptionSignature = this.fileBaseUrl + JSON.parse(res.data.object.prescriptionSignature).smallFileName}
              if(this.clinic.prescriptionReview){this.clinic.prescriptionReview = this.fileBaseUrl + JSON.parse(res.data.object.prescriptionReview).smallFileName}
              if(this.clinic.twoDimensionCode){this.clinic.twoDimensionCode = this.fileBaseUrl + JSON.parse(res.data.object.twoDimensionCode).smallFileName}
			  if(this.clinic.fyDoctorSignature){this.clinic.fyDoctorSignature = this.fileBaseUrl + JSON.parse(res.data.object.fyDoctorSignature).smallFileName}
          } else {
            this.$Message.error(res.data.message || "请求异常");
          }
        })
    },
    handlebacks() {
    //   localStorage.removeItem('orderStatus')
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
.ivu-steps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    font-size: 0;
    line-height: 1.5;
}
.ivu-steps-item:last-child{
    flex: none !important;
}
.Homechir .ivu-steps-item{
	display: inline-block;
	position: relative;
	vertical-align: top;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	overflow: hidden;
}
.Homechir {
	padding: 15px 0;
	width: 100%;
	background: #ffffff;
	box-sizing: border-box;
	.tit {
		margin:10px 0;
		font-weight:bold;
		text-align:center;
	}
	.main{
        width: 98%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
        .title {
            font-size: 20px;
            padding-left: 15px;
            margin-bottom: 20px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;
        }
        .w-select {
            width: 100px;
        }
        .box{
            padding: 0 30px;
        }
    }
    .Homechir-one,
    .Homechir-sel{
		width: calc(100% );
		margin: auto;
		min-height: 130px;
		background-color: white;
	}
	.btn{
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
}
.PerMask{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	.PerMask-com{
		padding-bottom: 30px;
		background-size:cover;
		position: relative;
		top:0;
		left:0;
		overflow: scroll;
		background-image: url('../../../assets/images/report_bg.jpg');
		.com-right{
			height: calc(100% - 40px);
			font-size: 14px;
			color: #242526;
			.com-left-one{
				width: 100%;
				height: calc(100% - 110px);
				overflow: auto;
			}
			.com-left-two{
				width: 100%;
				height: calc(100% - 81px);
				overflow: auto;
			}
			.com-left-one::-webkit-scrollbar,
			.com-left-two::-webkit-scrollbar{
				height: 0;
				width: 0;
			}
			.physician{
				width: 100%;
				min-height: 10px;
				margin-left: 5px;
				padding-top: 5px;
				span{
					display: inline-block;
					min-width: 32%;
					color: #999;
					font-size: 14px;
					line-height: 25px;
					display: inline-block;
					text-align: left;
					margin-bottom:5px;
					small{
						font-size: 12px;
						color: #333;
						font-weight: 500;
					}
					img{
						width: 80px;
						height: 50px;
						vertical-align: middle;
					}
				}
			}
			.line{
				width: 97%;
				height: 10px;
				margin-left: 5px;
				border-top:2px solid #333333;
				border-bottom:2px solid #333333;
			}
			.header{
				width: 100%;
				min-height: 100px;
				padding: 10px;
				text-align: center;
				position: relative;
				p:nth-child(1){
					font-size:20px;
					color: #333;
					font-weight: 500;
					margin: 10px 0;
				}
				p:nth-child(2){
					font-size:22px;
					color: #333;
					margin: 10px 0;
					font-weight: 500;
				}
				p:nth-child(3){
					border: 1px solid #999;
					width: 70px;
					height: auto;
					line-height: 26px;
					color: #333;
					font-size: 20px;
					position: absolute;
					top: 15px;
					left: 15px;
				}
				img{
					width: 80px;
					height: 80px;
					position: absolute;
					top: 10px;
					right: 15px;
				}
				.nub{
					padding: 15px 0 20px 0;
					span{
						color: #333;
						font-size: 15px;
						b{
							color: #999;
							font-size: 13px;
						}
					}
				}
			}

		}
	}
	.result{
		width: 98%;
		min-height: 160px;
		max-height: 300px;
		overflow-y: scroll;
		margin-left: 5px;
		position: relative;
		.title{
			color: #999;
			font-size: 14px;
			margin: 8px 0;
		}
		.dhei{
			border-bottom:1px dashed #cccccc;
		}
		.text{
			color: #333;
			font-size: 16px;
			font-weight: 500;
			line-height: 26px;
			letter-spacing: 1px;
		}
		.tt{
			display: inline-block;
			color: #333;
			font-size: 18px;
			font-weight: 500;
			letter-spacing: 1px;
		}
		.nub{
			font-size: 16px;
			color: #999;
			margin: 5px 0;
		}
		img{
			width: 80px;
			height: 80px;
			position: absolute;
			bottom: 25px;
			right: 10px;
		}
	}
	.essential{
		width: 98%;
		min-height: 100px;
		margin-left: 8px;
		padding: 7px 0;
		border-bottom:1.5px solid #cccccc;
		box-sizing: border-box;
		span{
			color: #999;
			font-size: 14px;
			line-height: 25px;
			display: inline-block;
			text-align: left;
			small{
				color: #333;
				font-size: 14px;
				font-weight: 500;
			}
		}
		span:nth-child(1){
			margin-right: 150px;
		}
		span:nth-child(2){
			margin-right: 80px;
		}
		span:nth-child(4){
			margin-right: 45px;
		}
		span:nth-child(6){
			margin-right: 65px;
		}
		span:nth-child(7){
			margin-right: 65px;
		}
		span:nth-child(8){
			margin-right: 25px;
		}
	}
}
</style>
